<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
<!--    page.js 的导入必须位于 vue.min.js 下面-->
    <script src="page.js"></script>
</head>
<body>
<div id="a" style="padding-bottom: 200px">

    <table>
<!--        展示分页数据-->
        <tr>
            <th>编号</th><th>标题</th><th>时间</th><th>内容</th>
        </tr>
        <tr v-for="row in result.data">
            <td>{{row.id}}</td>
            <td>{{row.title}}</td>
            <td>{{row.intime}}</td>
            <td>
                <div style="max-width: 200px;max-height: 20px;overflow: hidden">
                    {{row.content}}
                </div>
            </td>
        </tr>
    </table>
    <el-pagination ref="p"
            background page-size="10" current-page="1"
            :total="result.total"
            layout="first,last,prev, pager, next">
    </el-pagination>

</div>
<script>

    var v = new Vue({
        el : "#a",
        data : {
            result : {}
        },
        created(){
            axios.get('../../QueryNewServlet.s?currentPage=3&pageSize=10').then(res=>{
                // res 就是后台返回的数据 ，但是
                // res.data ==> {data,total}
                this.result = res.data;
                console.info(this.result);
            });
        },
        methods : {
            query(curPage){
                axios.get('../../QueryNewServlet.s',{
                    params : {
                        currentPage : curPage,
                        pageSize : this.$refs.p.pageSize
                    }
                }),then(res=>{
                    this.result = res.data;
                })
            }
        }
    })
</script>
</body>
</html>